<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .tips {
            line-height: 45px;
            font-size: 20px;
            text-indent: 10px;
        }
    </style>
</head>

<body>
    <div class="tips">
        距离十一放假还有xx天xx小时xx分xx秒
    </div>
</body>
<script>
    var tips = document.getElementsByClassName("tips")[0];
    var timer = null;

    console.log(tips);


    // 距离十一放假还有多少天?
    // 当前时间  距离  十一假期 的差值;

    // 页面加载时立即执行
    var now = new Date();
    var future = new Date("2023-9-29")
    // console.log(future);

    var ms = future - now;
    var time = Math.floor(ms / 1000);

    var day = Math.floor(time / (24 * 60 * 60));
    var hour = Math.floor(time / (60 * 60)) % 24;  // 不满一天的小时数
    var min = Math.floor(time / 60) % 60; //  不满一小时的分钟
    var sec = time % 60;  //  不满一分钟的秒数

    // console.log(day,hour,min,sec);

    // 距离十一放假还有xx天xx小时xx分xx秒

    // var str = "距离十一放假还有" + day + "天" + hour + "小时" +min+"分" + sec + "秒";
    var str = `距离十一放假还有${day}天${hour}小时${min}分${sec}秒`;
    console.log(str); 
    tips.innerText = str;

    timer = setInterval(function () { // 从计时器启动到回调函数第一次执行 => 需要等1s => 真空期(会渲染页面中原本的内容)
        var now = new Date();
        var future = new Date("2023-9-29")
        // console.log(future);

        var ms = future - now;
        var time = Math.floor(ms / 1000);

        var day = Math.floor(time / (24 * 60 * 60));
        var hour = Math.floor(time / (60 * 60)) % 24;  // 不满一天的小时数
        var min = Math.floor(time / 60) % 60; //  不满一小时的分钟
        var sec = time % 60;  //  不满一分钟的秒数

        // console.log(day,hour,min,sec);

        // 距离十一放假还有xx天xx小时xx分xx秒

        // var str = "距离十一放假还有" + day + "天" + hour + "小时" +min+"分" + sec + "秒";
        var str = `距离十一放假还有${day}天${hour}小时${min}分${sec}秒`;
        console.log(str);
        tips.innerText = str;
    }, 1000);


</script>

</html>